<template>
  <div class="w-[1150px] p-6 relative bg-white h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="tableData[0]?.lastWardId" class="w-60 text-right" />
    </div>
    <div class="w-full flex text-[22px] justify-between">
      <div class="w-1/4">{{ tableData[0]?.lastWardName }}</div>
      <div class="text-center flex-1">住院病房发药单（{{ ['针剂汇总', '片剂汇总', '汇总'][printType] }} ）</div>
      <div class="w-1/4"></div>
    </div>

    <div class="mt-6">
      <!-- 2：汇总 -->
      <div class="print-table">
        <div class="flex w-full">
          <div class="print-table-item w-[60px]">序号</div>
          <div class="print-table-item flex-1">药品</div>
          <div class="print-table-item w-[80px] text-right">数量</div>
          <div class="print-table-item w-[80px]">单位</div>
          <div class="print-table-item w-[100px]">发药人</div>
          <div class="print-table-item w-[160px]">发药时间</div>
        </div>
        <div v-for="(item, index) in tableData" :key="index" class="flex w-full">
          <div class="print-table-item w-[60px]">{{ index + 1 }}</div>
          <div class="print-table-item flex-1">{{ item.advName }}</div>
          <div class="print-table-item w-[80px] text-right">{{ item.minimumCount }}</div>
          <div class="print-table-item w-[80px]">{{ item.minimumUnit }}</div>
          <div class="print-table-item w-[100px]">{{ item.fyshr }}</div>
          <div class="print-table-item w-[160px]">{{ item.fysj }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-end mt-5">
      <div>打印时间：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  },
  printType: {
    type: Number,
    default: 2
  }
})
const tableData = ref([])

watch(
  () => props.printData,
  (val) => {
    // 使用 reduce 方法来分组对象
    tableData.value = val.printData.detail
  }
)
</script>
<style lang="less" scoped>
.border-b {
  border-bottom: 1px solid #000000;
}
</style>
